<template>
<!--integral.wxml-->
<form @submit="submitForm">
<view class="container">
    <view class="user-mes" @tap="enterAddressPageFun">       
        <view class="location">
             <block v-if="order.userAddress.province_name">
            <view class="user-contact">{{order.userAddress.consignee}}{{'　　'}}{{order.userAddress.mobile}}</view>
            <view class="address">{{order.userAddress.province_name + order.userAddress.city_name + order.userAddress.district_name + (order.userAddress.twon_name?order.userAddress.twon_name:'') + order.userAddress.address}}</view>            
            </block>            
            <block v-else>
                <view class="user-contact"></view> 
                <view class="address">请填写收货地址</view>   
            </block>
            <view class="pos-icon"><image class="wh100" src="/static/images/iconfont-address.png"></image></view>
        </view>
        <view class="border-img"><image class="wh100" src="/static/images/tt.png"></image></view>
        <view class="update-logistics">
            <image class="arrow-rigth" src="/static/images/icon-arrowdown.png"></image>
        </view>
    </view>
    <view class="order-meg">
        <view v-for="(item, index) in order.cartList" :key="index" class="order-detail">
            <view class="goods-img">
            <image class="wh100" :src="url + '/api/goods/goodsThumImages?goods_id=' + item.goods_id + '&width=100&height=100'"></image>
            </view>
            <navigator class="order-cont" :url="'/pages/goods/goodsInfo/goodsInfo?goods_id=' + item.goods_id">
                <view class="goods-name">{{item.goods_name}}</view>
                <view class="goods-color">{{item.key_name}}</view>
            </navigator>
            <view class="order-num">
                <view class="co-red">￥{{(orderPrices.goods_price-orderPrices.integral_money) / orderPrices.total_num || '0.00'}} + {{orderPrices.pay_points / orderPrices.total_num || 0}}积分</view>
                <view class="goods-num">x{{item.goods_num}}</view>
            </view>
        </view>
    </view>
    <view class="set-mes">
        <view v-if="order.store_prom">
            <icon type="info" size="16" color="#ff6a00"></icon>{{order.store_prom}}
        </view>
       <view class="invoice set-item" @tap="showInvoice">
            <view>发票信息</view>
            <view class="set-btn">
                <view>{{text}}</view>
                <image class="arrow-rigth" src="/static/images/icon-arrowdown.png"></image>
            </view>
        </view>
        <view class="invoice-remarks" :style="'display:' + (invoiceToggle?'none':'flex')">
            <view class>发票抬头 : </view> <input type="text" name="invoice_title" placeholder="单位或个人"></input>
        </view>
  
        <view class="use-item">
            <view>使用积分 : </view>
            <input type="number" name="pay_points" maxlength="20" disabled="disabled" :value="orderPrices.pay_points" :placeholder="'可用积分为:' + userInfo.pay_points || 0" @blur="keyUpChangePay2"></input>
            <button class="use-btn" form-type="submit" hidden="true">使用</button>
        </view> 
    </view>
    <view class="coupon-mes">
        <view>用户备注（50字）</view>
        <view class="leave-word">
            <textarea name="user_note" class="word-box" maxlength="50" @input="keyUpChangeNum" :disabled="openShippingModel"></textarea>
            <view class="max-word">{{50-maxWord}}/50</view>
        </view>
    </view>
    <!-- 价格栏 -->
    <view class="information">
        <view class="item">
            <view>商品金额</view>
            <view class="co-red">￥ {{orderPrices.goods_price}}元</view>  
        </view>
        <view class="item">
            <view>配送费用</view>
                     <view class="co-red" v-if="orderPrices.shipping_price > 0">￥ {{orderPrices.shipping_price}}元</view>
            <view class="co-red" v-else>包邮</view>
        </view>
        <view class="item">
            <view>已使用积分</view>
            <view class="co-red">{{orderPrices.pay_points}}</view>  
        </view>
        <view class="item">
            <view>积分抵扣</view>
            <view class="co-red">{{orderPrices.integral_money}}元</view>  
        </view>
    
    </view>
    <view class="btn-wrap">  
        <button form-type="submit" class="tips-btn" id="submitOrder">提交订单</button>
        <view class="pay-amount">
            <view class="payable">应付金额 : </view>
            <view class="co-red">￥ {{orderPrices.order_amount}}元</view>  
        </view>
    </view>
</view>
</form>
</template>

<script>
var app = getApp();
var request = app.globalData.request;
var common = require("../../../utils/common.js");
var md5 = require("../../../utils/md5.js");

export default {
  data() {
    return {
      url: app.globalData.setting.url,
      resourceUrl: app.globalData.setting.resourceUrl,
      order: null,
      //请求的订单数据
      orderPrices: null,
      //请求的订单价格数据
      invoiceToggle: true,
      //写发票抬头开关
      payWithPoints: true,
      //是否使用积分支付
      maxWord: 0,
      text: '不开发票',
      enterAddressPage: false,
      firstEnter: true,
      //是否第一次进入页面
      invoice_title: '个人',
      taxpayer: '',
      invoice_desc: '不开发票',
      formData: {
        user_note: ''
      },
      goods: "",
      userInfo: ""
    };
  },

  components: {},
  props: {},
  onLoad: function (options) {
    var that = this;
    that.setData({
      goods: options
    });
    that.requestCart2(); //可用余额实时刷新    

    app.globalData.getUserInfo(function (userInfo) {
      that.setData({
        userInfo: userInfo
      });
    }, true, false);
  },
  //重新加载数据
  onShow: function () {
    this.setData({
      order: this.order,
      text: this.text
    });

    if (this.enterAddressPage) {
      this.enterAddressPage = false;
      var address = uni.getStorageSync('cart:cart2:address');

      if (address !== '') {
        uni.removeStorageSync('cart:cart2:address');
      }

      this.requestCart2(address); //改变地址要重新请求数据
    }

    this.firstEnter = false;
  },
  methods: {
    /** 获取用户收货地址 */
    getDefaultAddress: function () {
      var that = this;
      request.get('/api/User/ajaxAddressList', {
        success: function (res) {
          if (res.data.result.length > 0) {
            var address = res.data.result[0] || null;
            that.setData({
              'order.userAddress': address
            });

            if (that.checkAddressList()) {
              that.calculatePrice();
            }
          } else {
            that.checkAddressList();
          }
        }
      });
    },
    requestCart2: function (address) {
      var that = this;
      request.post('/api/cart/integral', {
        failRollback: true,
        data: {
          goods_id: this.goods.goods_id,
          item_id: this.goods.item_id,
          goods_num: this.goods.goods_num,
          action: this.goods.action
        },
        success: function (res) {
          that.setData({
            order: res.data.result
          });
          that.setData({
            'order.cartList': [res.data.result.goods]
          });

          if (address) {
            that.setData({
              'order.userAddress': address
            });

            if (that.checkAddressList()) {
              that.calculatePrice();
            }
          } else if (uni.getStorageSync('goodsInfo:goodsInfo:address')) {
            that.setData({
              'order.userAddress': uni.getStorageSync('goodsInfo:goodsInfo:address')
            });
            uni.removeStorageSync('goodsInfo:goodsInfo:address');

            if (that.checkAddressList()) {
              that.calculatePrice();
            }
          } else {
            that.getDefaultAddress();
          }
        },
        failStatus: function (res) {
          if (res.data.status == -1) {
            that.setData({
              order: null
            });
            that.checkAddressList();
          }

          return false;
        }
      });
    },
    checkAddressList: function () {
      var that = this;

      if (!that.order || that.order.userAddress == null) {
        uni.showModal({
          title: '请先填写或选择收货地址~',
          success: function (res) {
            if (res.confirm) {
              that.enterAddressPageFun();
            } else {
              uni.navigateBack();
            }
          },
          fail: function () {
            uni.navigateBack();
          }
        });
        return false;
      }

      return true;
    },

    /** 显示发票信息 */
    showInvoice: function () {
      uni.navigateTo({
        url: '../../cart/invoice/invoice'
      });
    },
    keyUpChangeNum: function (e) {
      this.setData({
        maxWord: e.detail.value.length
      });
    },

    /** 请求计算价格 */
    calculatePrice: function (formData, submitOrder) {
      var that = this;

      if (typeof formData == 'undefined') {
        formData = that.formData;
      } else {
        that.formData = formData;
      }

      if (!!!that.order.userAddress) {
        return app.globalData.showTextWarining('请添加地址', function () {
          that.setData({
            enterAddressPage: true
          });
          uni.navigateTo({
            url: '../../user/address_list/address_list'
          });
        });
      }

      var postData = {
        address_id: that.order.userAddress.address_id,
        invoice_title: that.invoice_title ? that.invoice_title : '',
        taxpayer: that.taxpayer ? that.taxpayer : '',
        invoice_desc: that.invoice_desc ? that.invoice_desc : '',
        act: submitOrder ? 'submit_order' : '',
        goods_id: this.goods.goods_id,
        item_id: this.goods.item_id,
        goods_num: this.goods.goods_num,
        user_note: formData.user_note
      };
      request.post('/api/cart/integral2', {
        data: postData,
        success: function (res) {
          if (!submitOrder) {
            that.setData({
              orderPrices: res.data.result
            });
            return;
          }

          if (that.orderPrices.order_amount <= 0) {
            uni.setStorageSync('order:order_list:update', true);
            uni.redirectTo({
              url: '/pages/payment/payment/payment?order_sn=' + res.data.result + '&order_amount=' + that.orderPrices.total_amount
            });
            return;
          }

          common.jumpToCart4({
            order_sn: res.data.result,
            order_amount: that.orderPrices.order_amount
          }, 1);
        },
        failStatus: function (res) {
          if (res.data.status == -1) {
            uni.showModal({
              title: '请先设置支付密码',
              success: function (res) {
                if (res.confirm) {
                  uni.navigateTo({
                    url: '/pages/user/userinfo/userinfo'
                  });
                } else {
                  uni.navigateBack();
                }
              },
              fail: function () {
                uni.navigateBack();
              }
            });
          }
        }
      });
    },

    /** 提交订单 */
    submitForm: function (e) {
      var submitOrder = e.detail.target.id == 'submitOrder' ? true : false;
      this.calculatePrice(e.detail.value, submitOrder);
    },
    enterAddressPageFun: function () {
      this.enterAddressPage = true;
      uni.navigateTo({
        url: '/pages/user/address_list/address_list?operate=select'
      });
    }
  }
};
</script>
<style>
/* integral.wxss */
.user-mes{
    position: relative;
    background-color: #fff;
    font-size: 32rpx;
    color: #444;
}
.user-contact{
    padding: 24rpx 80rpx;
}
.location{
    position: relative;
    padding:0 80rpx 24rpx;
}
.pos-icon{
    position: absolute;
    left: 30rpx;
    top: 0;
    width: 32rpx;
    height: 32.5rpx;
    margin-top:48rpx
}
.border-img{
    width: 100%;
    height: 16rpx;
}
.update-logistics{
    position: absolute;
    right: 0;
    top: 0;
    width: 80rpx;
    height: 148rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}
.arrow-rigth{
    width: 32rpx;
    height: 32rpx; 
}
.order-meg{
    margin-bottom: 20rpx;
    font-size: 28rpx;
}
.order-detail{
    padding: 30rpx 0;
    border-bottom: 1px solid #f3f3f3;
    color: #777;
    min-height: 100rpx;
    background-color:#fff; 
}
.goods-img{
    float: left;
    width: 100rpx;
    height: 100rpx;
    margin:0 20rpx; 
}
.order-cont{
    float: left;
    width: 400rpx;
}
.goods-name{
    height: 60rpx;
    line-height: 30rpx;
    overflow: hidden;
    margin-bottom: 16rpx;
}
.goods-color{
    font-size: 24rpx;
}
.order-num{
    float: right;
    font-size: 24rpx;
    margin-top: 10rpx;
    margin-right: 20rpx;
    text-align: right;
    line-height: 42rpx;
}
.set-mes{
    background-color: #fff;
    padding: 0 20rpx;
    font-size: 30rpx;
    color: #444;
}
.set-mes>view{
    display: flex;
    align-items: center;
    height: 92rpx;
    border-bottom: 1px solid #f3f3f3;
}
.set-item{
    justify-content: space-between;
}
.set-btn{
    display: flex;
    font-size: 24rpx;
}
.set-mes input{
    width: 380rpx;
    height: 50rpx;
    line-height: 50rpx;
    border:1px solid #f3f3f3;
}
.use-btn{
    width: 100rpx;
    height: 50rpx;
    margin-left: 20rpx;
    line-height: 50rpx;
    text-align: center;
    background-color: #ff6a00;
    color: #fff;
}
.coupon-mes{
    margin: 20rpx 0;
    padding: 0 20rpx;
    background-color: #fff;
    font-size: 30rpx;
    color: #444;
}
.coupon-title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 92rpx;
}
.coupon-title>view{
    display: flex;    
}
.coupon-num{
    height: 36rpx;
    margin-left: 20rpx;
    padding: 0 16rpx;
    line-height: 36rpx;
    text-align: center;
    background-color: #ff6a00;
    color: #fff;
    font-size: 24rpx;
}
.leave-word{
    position: relative;
    margin: 20rpx 0;
    font-size: 24rpx;
}
.word-box{
    border:1px solid #f3f3f3;
    width: 690rpx;
    padding: 10rpx;
    height: 120rpx;
    line-height: 40rpx;
}
.max-word{
    position: absolute;
    right: 0;
    bottom: 0;
}
.information{
    padding: 0 20rpx;
    background-color: #fff;
    margin-bottom: 20rpx;
}
.information .item{
    display: flex;
    justify-content: space-between;
    height: 60rpx;
    line-height: 60rpx;
    font-size: 26rpx;
    color: #777;
}
.btn-wrap{
    height: 100rpx;
    background-color: #fff;
}
.tips-btn{
    float: right;
    width: 200rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    font-size: 30rpx;
    color: #fff;
    background-color: #ff6a00;
}
.pay-amount{
    float: right;
    display: flex;
    align-items: center;
    height: 100rpx;
    font-size: 26rpx;
    margin-right: 40rpx;
}
.payable{
    color: #444;
    margin-right: 20rpx;
}
/* 物流列表弹框 */
.shipping-modal{
    z-index: 20;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-y: hidden;
    color: #666666;
    background-color: white;
}
.shipping-nav{
    text-align: center;
    font-size: 35rpx;
    padding-top: 30rpx;
}
.shipping-list{
    padding: 20rpx 30rpx 40rpx;
    font-size: 28rpx;
}
.shipping-item{
    display: block;
    padding: 20rpx 0;
}
.shipping-btn{
    width: 100%;
    color: white;
    background-color: #ff6a00;
    line-height: 90rpx;
    text-align: center;
    font-size: 40rpx;
}

</style>